<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-orange"  :isBack="true"  backText="返回" title="表单"></cu-custom>
		<zh-form ref="form"  :rules="rules" :form="form">
			<zh-input v-model="form.nikeName"  prop='nikeName' :required="true" type="text" label="昵称" labelAlign="left" inputAlign="left" ></zh-input>
			<zh-input labelType="block" v-model="form.idcard"  prop='idcard' :required="true" type="text" label="身份证" labelAlign="left" inputAlign="right"  ></zh-input>
			<zh-picker
				pickerRef="sex"
				label="性别"
				:required="true"
				labelAlign="right"
				inputAlign="left"
				mode="selector"
				:options="sexData"
				rightIconClass="text-gray"
				v-model="form.sex"
				placeholder="请选择性别"
				themeColor="#FC7983"
				@pickerChange="onSexChange($event)"
				ref="sex"
			></zh-picker>
			<zh-text  v-model="form.name"  prop='name' :required="true" type="text" label="姓名" labelAlign="left" inputAlign="right" rightIconClass="basefont icon-home-fill text-blue"  ></zh-text>
			<zh-country
				label="国家/地区"
				labelType="block"
				labelAlign="left"
				inputAlign="left"
				placeholder="请选择国家/地区"
				ref='countrySelect'
				addressRef="countrySelect"
				v-model="form.country"
			>
			</zh-country>
			<zh-address
				label="省市县街道"
				labelAlign="left"
				inputAlign="left"
				placeholder="请选择省市区"
				ref='addressSelect'
				addressRef="addressSelect"
				v-model="form.addressValue"
				rightIconClass="text-gray"
				labelType="block"
			>
			</zh-address>
		</zh-form>
		<button class="cu-btn shadow margin-tb-sm lg bg-blue"  @tap="submit">提交</button>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				form:{nikeName:'',idcard:'',sex:'',name:'',country:'',addressValue:''},
				sexData: [{ dictKey: '1', dictValue: '男' },
						  { dictKey: '2', dictValue: '女' }],
				rules: {
					idcard:{ rule: 'length:18,18|isIdcard',message:{isIdcard:'请输入正确身份证',length:'身份证需要18位'}}
				}
			}
		},
		methods: {
			submit(n) {
				// 动态改变 是否必填 状态
				// this.rules.idcard.required = false
				// 校验表单数据
				this.$refs.form.validate(val => {
					console.log(val)
				})
			},
			onSexChange(e){
				//this.sex = e.value;
				console.log(e)
			},
		}
	}
</script>

<style>

</style>
